<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>审批中心</title>
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../script/vant/index.css" />
    <link rel="stylesheet" type="text/css" href="./css/headersearch.css" />
    <link rel="stylesheet" type="text/css" href="css/comm.css" />
    <link rel="stylesheet" type="text/css" href="css/customerservicelist.css" />
    <link rel="stylesheet" type="text/css" href="css/editStyle.css" />
    <link rel="stylesheet" type="text/css" href="css/home_task_con.css" />
    <style>
        .new-btn-bottom {
            width: 92%;
            margin: 0 auto;
            display: flex;
            margin-top: 15px;
            flex-direction: row;
            justify-content: center;
        }

        .new-blue-btn {
            width: 50%;
            text-align: center;
            margin: 0 5px;
            /* font-weight: bold; */
        }

        .time_style {
            float: right;
            color: #a2acbb;
        }

        .workheader {
            width: 100%;
            margin: 10px 0px 5px 0px;
            overflow: hidden;
        }

        .work_title_add {
            width: 80%;
            font-size: 0.8rem;
            font-weight: 500;
            margin-top: 0px;
        }

        .mt0 {
            margin-top: 0.1rem;
        }

        .padding_style {
            padding-bottom: 1rem;
            padding-top: 0.8rem;
        }

        .marginheight {
            margin-top: 0.3rem;
        }

        .mainbox {
            width: 92%;
            margin: 0 auto;
            margin-top: 15px;
            padding: 20px 16px 20px 16px;
        }

        .checkmain {
            width: 92%;
            margin: 0 auto;
            margin-top: 15px;
        }

        .checkmain input.aui-checkbox {
            width: 20px;
            height: 20px;
            float: left;
        }

        .checkmain label {
            width: 90%;
            color: #999;
            margin-left: 10px;
        }

        .work_title {
            width: 100%;
            color: #393939;
            height: 15px;
            line-height: 15px;
            margin: 15px 0px 20px 0px;
            padding-left: 10px;
            border-left: solid 0.1rem #289FFF;
            font-weight: bold;
        }

        .gj_box {
            padding: 10px !important;
        }

        .task_process_basic_title_time {
            width: 30px;
            height: 30px;
            line-height: 30px;
            border-radius: 5px;
            border: dashed 0.5px #289fff;
            text-align: center;
            color: #289fff;

        }

        .col-star {
            width: 8px;
            height: 8px;
            margin-top: 10px;
            margin-left: 5px;
        }

        .task_process_basic_title_name span {
            color: #999;
            font-size: 0.6rem;
        }

        /*工单进度样式*/
        .processul {
            width: 100%;
            margin: 0 auto;
        }

        .processulli {
            position: relative;
            padding: 0 15px;
            padding-right: 0;
            list-style: none;
            /*border-left: 2px solid #F1F1F1;*/
        }

        .processulli:before {
            /*content: "√";*/
            content: "";
            display: block;
            position: absolute;
            margin-left: -6px;
            top: 0;
            left: -5px;
            width: 10px;
            height: 10px;
            line-height: 22px;
            text-align: center;
            background: #F1F1F1;
            color: #fff;
            font-size: 14px;
            border-radius: 50%;
            border: solid 5px #fff;
        }

        .task_process_con {
            /*width: 92%;*/
            width: 100%;
            margin: 0 auto;
        }

        .task_process_basic_title {
            /*  height:2rem;
  line-height: 2rem;*/
            /*padding: 0 0.5rem;*/
            font-size: 0.8rem;
        }

        .shenpi {
            float: left;
        }

        .shenpi_person {
            position: relative;
            width: 40px;
            margin-right: 2px;
            margin-left: 2px;
            text-align: center;
            /* padding-left: 5px; */

        }

        .person {
            width: 30px;
            height: 30px;
            line-height: 30px;
            font-size: 0.6rem;
            border-radius: 5px;
            text-align: center;
            color: #fff;
            background: #289fff;
            margin-left: 2px;
        }

        .person_name {
            width: 38px;
            text-align: center;
            font-size: 0.6rem;
            height: 30px;
            line-height: 30px;
        }

        .ellipsis-1 {
            width: 38px;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .shenpi_person img {
            position: absolute;
            width: 18px;
            height: 18px;
            right: 0px;
            top: -8px;
            overflow: hidden;
        }

        .small_active {
            font-size: 0.5rem;
        }

        /* 附件 */
        .up_item {
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
}
        .upload {
            margin-left: 20px;
            font-size: 0.65rem;
            color: #289fff;
        }

        .upload i {
            padding-left: 5px;
        }

        .wenjian_item {
            width: 100%;
            height: 1.6rem;
            line-height: 1.6rem;
            border-radius: 5px;
            background: #F6FBFF;
            margin-bottom: 4px;
        }

        .wj_name {
            width: 70%;
            float: left;
            font-size: 0.75rem;
            padding-left: 10px;
        }
        .wj_delete i {
            padding-right: 10px;
            color: #289fff;
        }
        .wj_delete span{
            float: left;
            color: #289fff;
        }
        .wj_delete{

            width: 25%;
            text-align: right;
            float: right;
        }

    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="aui-content task">
            <div class=" boxarea mainbox">
                <div class="work_con_box">
                    <div class="workheader">
                        <div v-if="IsReject==0" class="work_title_add ellipsis_one fl">审批建议-同意</div>
                        <div v-if="IsReject==1" class="work_title_add ellipsis_one fl">审批建议-拒绝</div>
                        <!-- <div class="time_style">0/60</div> -->
                        <!-- <div v-if="item.ServiceStatus==50" class="typestatus ygd">已关单</div>   style="font-weight: bold;"-->
                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-input">
                            <textarea placeholder="请填写记录(选填信息)" style="height: 6rem;" v-model="AcceptCont"></textarea>
                        </div>
                    </div>
                    <!-- <div class="work_title work_title_add">{{item.TypeName}}</div> -->

                    <!-- <div class=" work_con_box_contain mt0 padding_style ">

                            <div class=" marginheight">
                                <div class="work_con_box_left">优惠项目</div>
                                <div class="work_con_box_right">
                                    <label>物业费、水费、电费</label>
                                </div>
                            </div>
                            <div class=" marginheight">
                                <div class="work_con_box_left">优惠说明</div>
                                <div class="work_con_box_right">
                                    <label>10元固定项目的优惠申请</label>
                                </div>
                            </div>

                        </div> -->

                </div>

                <!-- <div class="new-btn-bottom" style="overflow: hidden;">
                        <div class="work_beginbtnty3 new-blue-btn"
                            v-on:click="do_open_dialog(item.ID)">
                            <i class="icon iconfont icon-guanbi"
                                style=" font-size: 0.7rem; margin-right: 5px; color: #289FFF;"></i>拒绝
                        </div>   
                    </div> -->
            </div>
            <div class=" boxarea mainbox">
                <div class="work_con_box">
                    <div v-on:click="do_openUp_ex()" class="work_title" style="border-left: 0;padding-left: 0;margin: 0;">附件上传
                        <i class="icon iconfont icon-xinzeng" style="font-size: 0.7rem;float: right;"></i>
                    </div>
                    <div v-if="exUploadList!=undefined&&exUploadList.length>0" class="aui_formitem block"
                        style="border-bottom: none;width: 100%;">
                        <div class="aui_formcontent" style="padding-left: 0px; text-align: left;">
                            <div class="wenjian_item" v-for="(item,index) in exUploadList">
                                <div class="wj_name ellipsis_one">{{item.FileName}}</div>
                                <div class="wj_delete">
                                    <span v-on:click="open_flie_ex(item,index)">预览</span>
                                    <i v-on:click="do_delete_ex(item.ID)" class="icon iconfont icon-guanbi"
                                        style="font-size: 0.75rem; margin-left: 15px;"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <van-popup v-model="exshowup" round position="bottom" :style="{ height: '20%' }">
                    <div v-on:click="add_picture_ex()" class="up_item mt10" style="border-bottom: solid 0.5px #eee;">
                        上传图片
                    </div>
                    <!-- <div v-on:click="add_vedio_ex()" class="up_item" style="border-bottom: solid 0.5px #eee;">
                                                                上传视频
                                                            </div> -->
                    <div v-on:click="add_wenjian_ex()" class="up_item">上传文件</div>
                </van-popup>
            </div>
            <div v-if="IsReject==0" class="checkmain">
                <input class="aui-checkbox" type="checkbox" @click="checkbox()" v-model="ischecked">
                <label>
                    启用多级审批后，可提交审批申请信息至下一个审批人。
                </label>
            </div>

            <!-- 审批 -->
            <div v-if="ischecked" class=" boxarea edit">
                <div class="aui_formitem only_line no_line p0">
                    <div class="work_title">审批流程</div>

                    <div class="gj_box">
                        <ul class="processul">
                            <li class="processulli  li-border-color-grey">
                                <div class="task_process_con">
                                    <div class="handle">
                                        <div class="task_process_basic_title">
                                            <div class="task_process_basic_title_name fl">
                                                <div class="fl aui_formtitle" style="min-width: 2rem;">审批人<img
                                                        class="col-star" src="../image/redstar.png"></div>
                                                <div class="handle_con_msg ">
                                                    <span v-if="choose_id_list.length==0">请选择审批人</span>
                                                    <span v-if="choose_id_list.length>0">1人通过即可</span>
                                                </div>
                                            </div>
                                            <div class="fr" style="width: 70%;">
                                                <div class="task_process_basic_title_time ccc fr"
                                                    v-on:click="choose_persons(1)"><i
                                                        class="icon iconfont icon-addApp"></i>
                                                </div>



                                                <div v-if="choose_id_list.length<=3" class="shenpi"
                                                    v-for="(item,index) in choose_id_list">
                                                    <div class="shenpi_person">
                                                        <div class="person">{{item.UserName.slice(-2)}}</div>
                                                        <div class="person_name ellipsis-1">{{item.UserName}}</div>
                                                        <img v-on:click="guanbi_pic(item.UserID,1)"
                                                            src="../image/cx.png">
                                                        <!-- <i class="icon iconfont icon-guanbi" ></i> -->
                                                    </div>
                                                </div>
                                                <div v-if="choose_id_list.length>3">
                                                    <div class="shenpi">
                                                        <div class="shenpi_person">
                                                            <div class="person"
                                                                v-bind:class="{'small_active':choose_id_list.length>99}"
                                                                v-on:click="open_more(1)">{{choose_id_list.length}}人
                                                            </div>
                                                            <div class="person_name ellipsis-1">全部</div>
                                                        </div>
                                                    </div>
                                                    <div class="shenpi"
                                                        v-for="(item,index) in choose_id_list.slice(-2)">
                                                        <div class="shenpi_person">
                                                            <div class="person">{{item.UserName.slice(-2)}}</div>
                                                            <div class="person_name ellipsis-1">{{item.UserName}}</div>
                                                            <img v-on:click="guanbi_pic(item.UserID,1)"
                                                                src="../image/cx.png">
                                                            <!-- <i class="icon iconfont icon-guanbi" ></i> -->
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="cl"></div>
                                        </div>
                                    </div>
                                    <div class="hide_height"></div>
                                </div>
                            </li>
                            <li class="processulli  li-border-color-grey">
                                <div class="task_process_con">
                                    <div class="handle">
                                        <div class="task_process_basic_title">
                                            <div class="task_process_basic_title_name fl">
                                                <div class="fl">抄送人</div>
                                                <div class="handle_con_msg ">
                                                    <span v-if="select_id_list.length==0">请选择抄送人</span>
                                                    <span
                                                        v-if="select_id_list.length>0">已选{{select_id_list.length}}人</span>
                                                </div>
                                            </div>
                                            <div class="fr" style="width: 70%;">
                                                <div class="task_process_basic_title_time ccc fr"
                                                    style="margin-left: 15px;" v-on:click="choose_persons(0)"><i
                                                        class="icon iconfont icon-addApp"></i>
                                                </div>

                                                <div v-if="select_id_list.length<=3" class="shenpi"
                                                    v-for="(item,index) in select_id_list">
                                                    <div class="shenpi_person">
                                                        <div class="person">{{item.UserName.slice(-2)}}</div>
                                                        <div class="person_name ellipsis-1">{{item.UserName}}</div>
                                                        <img v-on:click="guanbi_pic(item.UserID,0)"
                                                            src="../image/cx.png">
                                                        <!-- <i class="icon iconfont icon-guanbi" v-on:click="guanbi_pic(index,0)"></i> -->
                                                    </div>
                                                </div>
                                                <div v-if="select_id_list.length>3">
                                                    <div class="shenpi">
                                                        <div class="shenpi_person">
                                                            <div class="person"
                                                                v-bind:class="{'small_active':select_id_list.length>99}"
                                                                v-on:click="open_more(0)">{{select_id_list.length}}人
                                                            </div>
                                                            <div class="person_name ellipsis-1">全部</div>
                                                            <!-- <img  v-on:click="guanbi_pic(index,0)" src="../image/cx.png"> -->
                                                        </div>
                                                    </div>
                                                    <div class="shenpi"
                                                        v-for="(item,index) in select_id_list.slice(-2)">
                                                        <div class="shenpi_person">
                                                            <div class="person">{{item.UserName.slice(-2)}}</div>
                                                            <div class="person_name ellipsis-1">{{item.UserName}}</div>
                                                            <img v-on:click="guanbi_pic(item.UserID,0)"
                                                                src="../image/cx.png">
                                                            <!-- <i class="icon iconfont icon-guanbi" v-on:click="guanbi_pic(index,0)"></i> -->
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="cl"></div>
                                        </div>
                                    </div>
                                    <div class="hide_height"></div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="aui_formitem no_line">
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="aui_bottombtn" v-on:click="do_save()">保存</div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript " src="../script/api.js "></script>
<script type="text/javascript " src="../script/vue.js "></script>
<script type="text/javascript" src="../script/aui-actionsheet.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript " src="../script/vant/vue.js"></script>
<script type="text/javascript " src="../script/vant/vant.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript" src="../script/aui-dialog.js"></script>
<script type="text/javascript" src="../script/aui-tab.js"></script>
<script type="text/javascript" src="../script/aui-scroll.js"></script>
<script type="text/javascript" src="../script/aui-popup.js"></script>
<script type="text/javascript " src="js/examine_yes.js"></script>

</html>